import React from 'react';
import {  
  AppstoreOutlined, 
  RobotOutlined,  
  CrownOutlined, 
  BgColorsOutlined, 
  BankOutlined, 
  EllipsisOutlined 
} from '@ant-design/icons';

const StyleCard = ({ icon, title, description, bgGradient }) => (
  <div className="card-hover bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-sm border border-gray-200 dark:border-gray-600 fade-in">
    <div className={`aspect-square ${bgGradient} flex items-center justify-center`}>
      {icon}
    </div>
    <div className="p-4">
      <h3 className="font-semibold text-gray-900 dark:text-white">{title}</h3>
      <p className="text-sm text-gray-500 dark:text-gray-400">{description}</p>
    </div>
  </div>
);

const CategoryCard = ({ title, items, color }) => (
  <div className="bg-white dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
    <h4 className="font-medium mb-3 text-gray-900 dark:text-white">{title}</h4>
    <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
      {items.map((item, index) => (
        <li key={index} className="flex items-center">
          <i className={`fas fa-circle text-xs mr-2 ${color}`}></i> {item}
        </li>
      ))}
    </ul>
  </div>
);

const StylesSection = () => {
  const styles = [
    {
      icon: <AppstoreOutlined className="text-4xl text-blue-600 dark:text-blue-300" />,
      title: "宫崎骏风格",
      description: "梦幻般的童话世界",
      bgGradient: "bg-gradient-to-br from-blue-100 to-blue-300 dark:from-blue-900 dark:to-blue-700"
    },
    {
      icon: <AppstoreOutlined className="text-4xl text-yellow-600 dark:text-yellow-300" />,
      title: "乐高风格",
      description: "积木构建的创意世界",
      bgGradient: "bg-gradient-to-br from-yellow-100 to-yellow-300 dark:from-yellow-900 dark:to-yellow-700"
    },
    {
      icon: <RobotOutlined className="text-4xl text-red-600 dark:text-red-300" />,
      title: "皮克斯风格",
      description: "温暖的三维动画风格",
      bgGradient: "bg-gradient-to-br from-red-100 to-red-300 dark:from-red-900 dark:to-red-700"
    },
    {
      icon: <AppstoreOutlined className="text-4xl text-purple-600 dark:text-purple-300" />,
      title: "新海诚风格",
      description: "光影交织的唯美世界",
      bgGradient: "bg-gradient-to-br from-purple-100 to-purple-300 dark:from-purple-900 dark:to-purple-700"
    },
    {
      icon: <CrownOutlined className="text-4xl text-pink-600 dark:text-pink-300" />,
      title: "迪士尼风格",
      description: "经典童话动画风格",
      bgGradient: "bg-gradient-to-br from-pink-100 to-pink-300 dark:from-pink-900 dark:to-pink-700"
    },
    {
      icon: <BgColorsOutlined className="text-4xl text-green-600 dark:text-green-300" />,
      title: "水彩画风格",
      description: "柔和的色彩与笔触",
      bgGradient: "bg-gradient-to-br from-green-100 to-green-300 dark:from-green-900 dark:to-green-700"
    },
    {
      icon: <BankOutlined className="text-4xl text-indigo-600 dark:text-indigo-300" />,
      title: "赛博朋克风格",
      description: "高科技低生活的未来",
      bgGradient: "bg-gradient-to-br from-indigo-100 to-indigo-300 dark:from-indigo-900 dark:to-indigo-700"
    },
    {
      icon: <EllipsisOutlined className="text-4xl text-gray-600 dark:text-gray-300" />,
      title: "更多风格",
      description: "探索无限可能",
      bgGradient: "bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-700"
    }
  ];

  const categories = [
    {
      title: "极简主义",
      items: ["大胆现代", "优雅复古", "未来科技", "北欧风格"],
      color: "text-primary-500"
    },
    {
      title: "后现代结构",
      items: ["朋克风格", "赛博朋克", "波普艺术", "孟菲斯"],
      color: "text-secondary-500"
    },
    {
      title: "解构瑞士",
      items: ["蒸汽波", "超现实拼贴", "新巴洛克", "新表现主义"],
      color: "text-green-500"
    },
    {
      title: "液态数字",
      items: ["数据可视化", "包豪斯", "构成主义", "孟菲斯80年代"],
      color: "text-blue-500"
    }
  ];

  return (
    <section id="styles" className="py-16 bg-gray-50 dark:bg-gray-800">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16 fade-in">
          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">丰富艺术风格选择</h2>
          <p className="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">从经典到现代，我们提供多种艺术风格供您选择，满足不同创作需求</p>
        </div>
        
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {styles.map((style, index) => (
            <StyleCard key={index} {...style} />
          ))}
        </div>
        
        {/* Style Categories */}
        <div className="mt-16 fade-in">
          <h3 className="text-xl font-semibold mb-6 text-center text-gray-900 dark:text-white">风格分类</h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            {categories.map((category, index) => (
              <CategoryCard key={index} {...category} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default StylesSection; 